<template>
	<router-view v-slot="{ Component, route }">
		<transition :name="transitionName" mode="out-in">
			<div>
				<keep-alive :max="10">
					<component :is="Component" :key="route.name" v-if="route.meta?.keepAlive" class="absolute-page"
						:class="hasHeader ? 'has_header_top' : ''" />
				</keep-alive>
				<component :is="Component" :key="route.name" v-if="!route.meta?.keepAlive" />
			</div>
		</transition>
	</router-view>
</template>

<script setup lang='ts'>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
// import gsap from 'gsap';
const router = useRouter();
const transitionName = ref('');

defineProps({
	hasHeader: {
		default: false
	}
})

router.beforeEach((to: any) => {
	if (to.meta.animation) {
		transitionName.value = to.meta.animation;
	} else {
		transitionName.value = ''
	}
});
</script>

<style lang="scss" scoped>
// 默认淡入淡出效果
.fade-enter-active {
	transition: opacity 0.3s ease;
}

.fade-leave-active {
	display: none;
	transition: none;
	/* 移除离开过渡 */
}

.fade-enter-from {
	opacity: 0;
}

.fade-leave-to {
	opacity: 0;
}

// 延迟的默认淡入淡出效果
.fade2-enter-active {
	transition: opacity 0.4s ease;
}

.fade2-leave-active {
	display: none;
	transition: none;
	/* 移除离开过渡 */
}

.fade2-enter-from {
	opacity: 0;
}

.fade2-leave-to {
	opacity: 0;
}


// 横向滑动效果
.slide-left-enter-active,
.slide-left-leave-active {
	transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
	position: absolute;
	width: 100%;
}

.slide-left-enter-from {
	opacity: 0;
	transform: translateX(-100%);
}

.slide-left-leave-to {
	opacity: 0;
	transform: translateX(100%);
}

.slide-right-enter-active,
.slide-right-leave-active {
	transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
	position: absolute;
	width: 100%;
}

.slide-right-enter-from {
	opacity: 0;
	transform: translateX(100%);
}

.slide-right-leave-to {
	opacity: 0;
	transform: translateX(0);
}
</style>